<template>
	<view class="page-content">
		<view class="bg_fff pd-20">
			<view class="moneyBox income">
				<view class="display_col_center">
					<view class="now">
						<text>￥</text>
						<text>{{total?total['可提']:0}}</text>
					</view>
					<text class="c_999999 f_24">可提现收益</text>
				</view>
				<view class="display_col_center" style="margin-left: 20rpx;flex: 1;">
					<view class="pre">
						<text>￥</text>
						<text>{{total?total['全年']:0}}</text>
					</view>
					<text class="c_999999 f_24">已提现收益</text>
				</view>
				<view style="flex: 0.3;"></view>
			</view>
			<view class="display_row_btn_center choiseBox">
				<text class="c_999999 f_30">请选择提现账户</text>
				<uni-data-picker :localdata="acArr" :map="{text:'account',value:'id'}" popup-title="提现账户"
					v-model="applyData.account_id" style="width: 40%;" v-if="acArr.length"></uni-data-picker>
				<view v-else @click="showPop">
					<text class="c_999999 f_30">请选择></text>
				</view>
			</view>
			<view class="mt-20">提现金额</view>
			<view>
				<u-input placeholder="请输入提现金额" border="bottom" clearable type="digit" color="#000" fontSize="20px"
					v-model="applyData.amount">
					<u-text text="￥" slot="prefix" bold color="#000" size="28px"></u-text>
				</u-input>
				<view class="f_24">
					<text>当前可提现收益{{total?total['可提']:0}}元，</text>
					<text class="c_C62B2C" @click="inputAll(total?total['可提']:0)">全部提现</text>
				</view>
			</view>

			<view class="btmBox c_ffffff" style="margin-top: 80rpx;width: 96%;margin-left: 2%;"
				@click="$u.throttle(doSub, 3000)">
				确认提现
			</view>
		</view>

		<view class="bg_fff mt-20" style="padding: 20rpx;">
			<view class="display_row_btn_center mt-20">
				<picker @change="typeChange" :value="type" :range="array" range-key="text">
					<view class="typebox">{{array[type].text}}</view>
				</picker>
				<uni-datetime-picker v-model="time" type="daterange" @change="timeChange" />
			</view>
		</view>

		<u-list v-if="dataList.length" @scrolltolower="listScrollTolower" :customStyle="{
			backgroundColor:'#fff',paddingTop: '20rpx',
			boxSizing: 'border-box', paddingLeft:'20rpx', paddingRight:'20rpx', }">

			<view v-for="(item, index) in dataList" :key="index">
				<view class="display_row_btn_center itemBox">
					<u-image src="https://dtkj-qnyimg.diankuai.com/%E6%94%B6%E7%9B%8A/%E6%8F%90%E7%8E%B0.png"
						width="80rpx" height="80rpx" v-if="item.type=='transfer_banks'"></u-image>
					<u-image
						src="https://dtkj-qnyimg.diankuai.com/%E6%94%B6%E7%9B%8A/%E6%94%AF%E4%BB%98%E5%AE%9D%20%E6%8B%B7%E8%B4%9D.png"
						width="80rpx" height="80rpx" v-if="item.type=='alipay_account'"></u-image>
					<u-image
						src="https://dtkj-qnyimg.diankuai.com/%E6%94%B6%E7%9B%8A/%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98%20%E6%8B%B7%E8%B4%9D.png"
						width="80rpx" height="80rpx" v-if="item.type=='wechat_account'"></u-image>
					<view style="flex: 1;margin-left: 10rpx;" class="ainfoBox">
						<view class="acinfo">
							<text
								class="c_333333 f_30">{{item.type=='transfer_banks'?item.bank_code:item.usercode}}</text><text
								class="atype">{{item.type=='transfer_banks'?'银行卡':(item.type=='alipay_account'?'支付宝':'微信')}}</text>
						</view>
						<text class="c_999999 f_24">{{item.date}}</text>
					</view>
					<view class="ainfoBox" style="align-items: flex-end;">
						<text class="c_333333"
							style="font-size: 22rpx;">{{item.status==0?'驳回':(item.status==1?'待审核':(item.status==2?'已审核':(item.status==3?'打款中':(item.status==4?'已打款':'已收款'))))}}</text>
						<text class="c_333333 f_34" style="font-weight: bold;">{{item.amount}}</text>
					</view>
				</view>
				<u-line direction="row" color="#999999"></u-line>
			</view>

		</u-list>
		<u-empty mode="list" v-else :customStyle="{flex:'1',backgroundColor:'#fff'}"></u-empty>
	</view>
</template>

<script>
	import {
		getCashAccount,
		applyTransfer,
		getTransfers
	} from '@/config/api.js'

	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				array: [{
					id: -1,
					text: "全部"
				}, {
					id: 1,
					text: "待审核"
				}, {
					id: 2,
					text: "已审核"
				}, {
					id: 3,
					text: "打款中"
				}, {
					id: 4,
					text: "已打款"
				}, {
					id: 0,
					text: "驳回"
				}],
				time: [getDate({
					format: true
				}), getDate({
					format: true
				})],
				type: 0,
				applyData: {
					amount: 0,
					account_id: ""
				},
				acArr: [],
				dataList: [],
				page: 1,
				pages: 1,
				total: null
			}
		},
		onLoad() {
			this.getData();
			this.getList();
		},
		onShow() {

		},
		methods: {
			showPop() {
				uni.showModal({
					title: '提示',
					content: '未添加提现账户',
					confirmText: '去添加',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/center/cashAccount"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			inputAll(all) {
				this.applyData.amount = all;
			},
			typeChange(e) {
				this.type = e.detail.value;
				this.dataList = [];
				this.page = 1;
				this.pages = 1;
				this.getList();
			},
			getList() {
				var form = {
					create_at: this.time[0] + ' - ' + this.time[1],
					page: this.page
				}

				if (this.type != 0) {
					var tmp = this.array[this.type];
					form['status'] = tmp.id;
				}

				getTransfers(form).then(res => {
					this.total = res.total;
					this.dataList = this.dataList.concat(res.list);
					this.pages = res.page.pages;
					this.page++;
				}).catch((err) => {

				});
			},
			listScrollTolower() {
				if (this.page <= this.pages) {
					this.getList();
				}
			},
			doSub() {
				if (this.applyData.account_id == "") {
					uni.showToast({
						title: "请选择提现账户！",
						duration: 2000,
						icon: 'none'
					})

					return;
				}

				if (!(!isNaN(parseFloat(this.applyData.amount)) && isFinite(this.applyData.amount))) {
					uni.showToast({
						title: "请输入正确金额！",
						icon: 'none',
						duration: 2000
					})

					return;
				}

				if (this.applyData.amount <= 0) {
					uni.showToast({
						title: "请输入正确金额！",
						icon: 'none',
						duration: 2000
					})

					return;
				}

				applyTransfer(this.applyData).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'success',
						duration: 2000
					})
				}).catch(err => {
					uni.showToast({
						title: err.info,
						icon: 'error',
						duration: 2000
					})
				})
			},
			getData() {
				getCashAccount().then(res => {
					if (res.wechat.length > 0) {
						this.acArr = this.acArr.concat(res.wechat);
					}
					if (res.ali.length > 0) {
						this.acArr = this.acArr.concat(res.ali);
					}
					if (res.bank.length > 0) {
						this.acArr = this.acArr.concat(res.bank);
					}
				})
			}
		}
	}
</script>

<style scoped>
	.moneyBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.income {
		justify-content: flex-end;
		align-items: flex-end;
	}

	.now {
		font-size: 40rpx;
	}

	.now>text:last-child {
		font-size: 60rpx;
		font-weight: 600;
	}

	.pre {
		font-size: 30rpx;
	}

	.pre>text:last-child {
		font-size: 40rpx;
	}

	/deep/ .selected-area.placeholder {
		color: #c0c4cc !important;
		font-size: 15px !important;
		text-align: right;
	}

	/deep/ .input-value.input-value-border {
		height: 24px !important;
		padding: 0px !important;
		border: none;
	}

	/deep/.text-color {
		color: red !important;
	}

	.typebox {
		box-sizing: border-box;
		border-radius: 4px;
		border: 1px solid #e5e5e5;
		height: 37px;
		width: 120rpx;
		text-align: center;
		line-height: 35px;
		margin-right: 20rpx;
	}

	.choiseBox {
		background-color: #F2F2F2;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	/deep/ .typebox {
		color: #666;
	}

	.ainfoBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 80rpx;
		align-items: flex-start;
	}

	.atype {
		color: #1E2E6A;
		border: 1px solid #1E2E6A;
		border-radius: 4rpx;
		font-size: 16rpx;
		padding: 4rpx 10rpx;
		margin-left: 20rpx;
	}

	.acinfo {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.itemBox {
		padding: 20rpx 0px;
	}
</style>
